<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo" :a="sum">
			<h2>当前求和为：{{sum}}</h2>
			<button id="btn" @click="add">点我sum+1</button>	
			<button @click="death">不想活了</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				el:'#demo',
				/* template:`
					<div :a="sum">
						<h2>当前求和为：{{sum}}</h2>
						<button id="btn" @click="add">点我sum+1</button>		
					</div>
				`, */
				data:{
					sum:1
				},
				methods:{
					add(){
						console.log('你点了【点我sum+1】按钮')
						this.sum += 1
					},
					death(){
						this.$destroy()
					}
				},
				watch:{
					sum(){
						console.log('sum变了')
					}
				},
				//数据代理、数据劫持创建之前
				beforeCreate(){
					this.x = 999
					console.log('beforeCreate',this)
					// debugger;
				},
				//数据代理、数据劫持创建完毕
				created(){
					console.log('created',this)
					// debugger;
				},
				//挂载之前
				beforeMount(){
					console.log('beforeMount',this)
					// document.getElementById('btn').innerText = '哈哈'
					// debugger;
				},
				//挂载完毕
				mounted(){
					console.log('mounted',this.$el)
					// debugger;
				},
				//更新之前
				beforeUpdate(){
					console.log('beforeUpdate',this)
					// debugger;
				},
				//更新完毕
				updated(){
					console.log('updated',this)
					// debugger;
				},
				//销毁之前
				beforeDestroy(){
					console.log('beforeDestroy',this)
					this.add()
					// debugger;
				},
				destroyed(){
					console.log('destroyed',this)
				}
			})

		</script>
	</body>
</html>